<template>
  <el-dialog
    v-model="centerDialogVisible"
    :title="t('dbms.serviceEdit.selectMessageCodeTitle')"
    align-center
    width="80%"
    destroy-on-close
    :close-on-click-modal="false"
  >
    <wsm-table
      ref="table"
      v-model="queryFormType"
      :change-load="true"
      load-url="/dbms-server/base/intercode/page"
    >
      <template #title>{{ t('dbms.serviceEdit.messageCodeTitle') }}</template>
      <template #query="{ data }">
        <el-form-item :label="t('dbms.interCode.code')">
          <el-input v-model="data.code.value" />
        </el-form-item>
      </template>
      <template #button="{ row }">
        <el-button v-if="row" @click="select(row.code)" type="primary">{{
          t('dbms.dbTable.selectBtn')
        }}</el-button>
      </template>
      <template #column>
        <el-table-column prop="code" :label="t('dbms.interCode.code')" width="250" />
        <el-table-column prop="appName" :label="t('dbms.interCode.appName')" width="180" />
        <el-table-column prop="msgName" :label="t('dbms.interCode.msgName')" />
      </template>
    </wsm-table>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { WsmTable } from '@/components/WsmTable'
import { QueryFormType, QueryType } from '@/components/WsmTable/src/types'

const { t } = useI18n()
const centerDialogVisible = ref(false)

const table = ref()

const queryFormType: QueryFormType = {
  appName: {
    value: '',
    clear: false,
    queryType: QueryType.EQ
  },
  code: {
    value: '',
    queryType: QueryType.LIKE
  }
}

let callback: Function = () => {}

const select = (code: string) => {
  callback(code)
  hide()
}

const show = (appName: string, cb: Function) => {
  callback = cb
  queryFormType.appName.value = appName
  centerDialogVisible.value = true
}

//关闭表单
const hide = () => {
  centerDialogVisible.value = false
}
//暴露方法
defineExpose({ show, hide })
</script>
